<!DOCTYPE html SYSTEM "about:legacy-compat">
<html>
    <head>
        <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
        <link href="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.13.4/b-2.3.6/b-html5-2.3.6/b-print-2.3.6/datatables.min.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script><script src="https://cdn.datatables.net/v/bs5/jszip-2.5.0/dt-1.13.4/b-2.3.6/b-html5-2.3.6/b-print-2.3.6/datatables.min.js"></script>
    </head>
    <body style="padding-top: 3.5rem;">
        <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
            <a class="navbar-brand" href="#">PMD - CPD (Copy and Paste Detector)</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item" id="nav_enable_datatable">
                        <a class="nav-link" href="?d=">Enable datatable</a>
                    </li>
                    <li class="nav-item" id="nav_disable_datatable">
                        <a class="nav-link" href="?">Disable datatable</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" target="_blank" rel="noopener noreferrer" href="https://docs.pmd-code.org/latest/pmd_userdocs_cpd.html#refactoring-duplicates">About Refactoring Duplicates</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="container">
            <div class="row">
                <div class="col">
                    <h4>Summary of duplicated code</h4>
                    <p>This page summarizes the code fragments that have been found to be replicated in the code.</p>
                    <table class="table table-light table-bordered table-striped table-hover">
                        <tr>
                            <th># Duplications</th><th>Total lines</th><th>Total tokens</th><th>Approximate number of bytes</th>
                        </tr>
                        <tr>
                            <td class="SummaryNumber">1</td><td class="SummaryNumber">60</td><td class="SummaryNumber">75</td><td class="SummaryNumber">300</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <h4>Details of duplicated code</h4>
                </div>
                <table style="width:100%" id="data_table" class="table table-light table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th>lines</th><th>tokens</th><th>files</th><th>codefragment</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>60</td><td>75</td><td>
                                <table class="table table-light table-bordered table-striped table-hover">
                                    <tr>
                                        <th>column</th><th>endcolumn</th><th>line</th><th>endline</th><th>path</th>
                                    </tr>
                                    <tr>
                                        <td>2</td><td>3</td><td>1</td><td>6</td><td>/var/Foo.java</td>
                                    </tr>
                                    <tr>
                                        <td>4</td><td>5</td><td>73</td><td>78</td><td>/var/Foo.java</td>
                                    </tr>
                                </table>
                            </td><td>
                                <pre>code
fragment</pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <script>
  let params = (new URL(document.location)).searchParams;
  let showDatatable = false;

  //------------ can be called with this parameter d
  if (params.get('d') !== null) { // got it via query param d
      showDatatable = true;
  }

  if (showDatatable)  {
    $("#nav_disable_datatable").show();
    $("#nav_enable_datatable").hide();
    $(document).ready( function () {
        $('#data_table').DataTable({
          dom: "<'row'<'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'f>>" +
               "<'row'<'col-sm-12'tr>>" +
               "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
          buttons: [
              'copy', 'csv', 'excel', 'pdf', 'print'
          ]
        }
        );
    } );
  } else {
    $("#nav_disable_datatable").hide();
    $("#nav_enable_datatable").show();
  }

</script>
    </body>
</html>
